<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>找回密码</title>
        <%-- 全站样式 --%>
        <jsp:include page="/WEB-INF/jsps/template_style.jsp"></jsp:include>
    
    <style>
        #wizard {border:5px solid #789;font-size:12px;height:450px;margin:20px auto;
            width:520px;overflow:hidden;position:relative;}
        #wizard .items{width:20000px; clear:both; position:absolute;}
        #wizard .right{float:right;}
        #wizard #status{height:35px;background:#123;padding-left:25px !important;}
        #status li{float:left;color:#fff;padding:10px 30px;}
        #status li.active{background-color:#369;font-weight:normal;}
        .input{width:240px; height:30px; margin:10px auto; line-height:50px;
            border:1px solid #d3d3d3; padding:2px}
        .page{padding:20px 30px;width:500px;float:left;}
        .page h3{height:42px; font-size:16px; border-bottom:1px dotted #ccc; margin-bottom:20px;
            padding-bottom:5px}
        .page h3 em{font-size:12px; font-weight:500; font-style:normal}
        .page p{line-height:24px;}
        .page p label{font-size:14px; display:block;}
        .btn_nav{height:36px; line-height:36px; margin:20px auto;}
        .prev,.next{width:100px; height:32px; line-height:32px; background:url(btn_bg.gif)
        repeat-x bottom; border:1px solid #d3d3d3; cursor:pointer}
    </style>
    </head>
<body>
	<!-- 后台回显数据 -->
	<c:if test="${!empty message }">
		<script type="text/javascript">
			alert("${message}");
		</script>
	</c:if>
    <div class="container-fluid">
     <input type="hidden" id="baseUrl" value="${pageContext.request.contextPath}">
        <form action="<c:url value="/findPassword.do"/>" method="post" onsubmit="return submitForm();" name="form">
            <div id="wizard">
                <ul id="status">
                    <li class="active"><strong>1.</strong>输入邮箱并且选择找回方式</li>
                    <li><strong>2.</strong>填写验证码或密保</li>
                    <li><strong>3.</strong>完成</li>
                </ul>

                <div class="items">
                    <div class="page">
                        <h3>输入登录帐号<br/><em>请填写您账号用于确定人员</em></h3>
                        <p><label>邮箱：</label><input type="email" class="input" id="email" name="email" /></p>
                        <p><label>找回方式：</label><select id="pid" onchange="gradeChange()" style="height: 30px;" name="flag">
                             <option value="1">请选择找回方式</option>
                            <option value="2">密保找回</option>
                            <option value="3">手机验证码找回</option>
                           <option value="4">邮箱找回</option>
                        </select></p>
                        <div class="btn_nav">
                            <input type="button" class="next right" value="下一步&raquo;" />
                        </div>
                    </div>
                    <div class="page">
                        <h3 id="add">填写信息<br/></h3>
                        <div class="row" id="div1">

                        </div>
                        <!--<p id="question"><label>密保问题</label><select style="width: 240px;">
                            <option>问题一</option>
                            <option>问题二</option>
                            <option>问题三</option>
                        </select></p>
                        <p id="ansnwer"><label>密保答案：</label><input type="text" class="input" name="qq" /></p>
                        <p id="phone"><label>手机号码：</label><input type="text" class="input" name="mobile" />&nbsp;<input type="button" value="获取验证码"></p>
                        <p id="phonecode"><label>手机验证码：</label><input type="text" class="input" name="mobile" /></p>
                        <p id="emailcode"><label>邮箱验证码：</label><input type="text" class="input" name="mobile" />&nbsp;<input type="button" value="获取验证码"></p>
                    --> <div class="btn_nav">
                            <input type="button" class="prev" style="float:left" value="&laquo;上一步" />
                            <input type="button" class="next right" value="下一步&raquo;" />
                        </div>
                    </div>
                    <div class="page">
                        <h3>填写新密码<br/><em>点击确定完成修改。</em></h3>
                        <p ><label>新密码：</label><input type="password" class="input" name="password" /></p>
                        <p ><label>确定新密码：</label><input type="password" class="input" name="password1" /></p>

                        <div class="btn_nav">
                            <input type="button" class="prev" style="float:left" value="&laquo;上一步" />
                            <input type="submit" class="next right" id="sub" value="确定" onclick="findPassword();"/>
                        </div>
                    </div>
                </div>
            </div>
        </form>

				<%--页脚 --%>
				<jsp:include page="/WEB-INF/jsps/footer.jsp"></jsp:include>
            </div>
        </div>

        <div class="page-loading-overlay">
            <div class="loader-2"></div>
        </div>
        
    <%-- 尾部内容 --%>
    <jsp:include page="/WEB-INF/jsps/template_tail.jsp" />
    
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript" src="assets/js/my.js"></script>
        <!--Specific JS for this page-->
        <script type="text/javascript">
            function gradeChange(){


                var objS = document.getElementById("pid");
                var value = objS.options[objS.selectedIndex].value;

                if(value==3){
                    $("#div1").empty();
                    var str = "<p class='new'><label>手机号码：</label><input type='text' class='input' name='mobile' />&nbsp;<input type='button' value='获取验证码'></p>"+
                        "<p class='new'><label>手机验证码：</label><input type='text' class='input' name='mobile' /></p>";
                    $("#div1").append(str);

                }else if(value==2){
                    $("#div1").empty();
                    var str = "<p class='new'><label>密保问题</label><select style='width: 240px;height: 30px;' name='id'>"+
                        "<option value='1'>你父亲名字</option>"+
                        "<option value='3'>你高中学号是多少</option>"+
                        "<option value='2'>你母亲的名字是谁</option>"+
                        "</select></p>"+
                        "<p class='new'><label>密保答案：</label><input type='text' class='input' name='passwordQuestion' /></p>";
                    $("#div1").append(str);
                }else if(value==4){
                    $("#div1").empty();
                    var str = "<p id='emailcode'>" +
                    "<label>邮箱验证码：</label><input type='text' class='input' name='verification' />&nbsp;" +
                    "<button type='button' value='获取验证码' onclick='sendEmail();'>获取验证码</button></p>";
                    $("#div1").append(str);
                }
              





              /*    $("#phone").attr("class","");
                $("#phonecode").attr("class","");
                $("#emailcode").attr("class","");
                $("#question").attr("class","");
                $("#ansnwer").attr("class","");
                if(value==2){
                    $("#phone").attr("class","sr-only");
                    $("#phonecode").attr("class","sr-only");
                    $("#emailcode").attr("class","sr-only");
                }
                if(value = 3){
                    $("#question").attr("class","sr-only");
                    $("#ansnwer").attr("class","sr-only");
                    $("#emailcode").attr("class","sr-only");
                }
                if(value = 4){
                    $("#phone").attr("class","sr-only");
                    $("#phonecode").attr("class","sr-only");
                    $("#question").attr("class","sr-only");
                    $("#ansnwer").attr("class","sr-only");
                }*/
            }
            function sendEmail(){
            	var email = $.trim($('#email').val());
            	$.post($("#baseUrl").val() + "/sendEmail.do",
      				  {
      			 		email: email
      				  },
      				  function(data){
      					  var msg = data.email_msg;
      						if (msg == "success"){
      							alert("验证码已发送，请注意查收");
      							return true;
      						} else {
      							
      							return false;
      						}
      				  });
            }
        </script>
        <script type="text/javascript">
       		 $("#email").blur(function(){
       			var email = $.trim($('#email').val());
            	$.post($("#baseUrl").val() + "/emailCheck.do",
      				  {
      			 		email: email
      				  },
      				  function(data){
      					  var msg = data.email_msg;
      						if (msg == "success"){
      							alert("邮箱未注册");
      							return false;
      						} else if(msg=="error"){
      							
      							return true;
      						}else{
      							alert(msg);
      						}
      				  });
       		 });
        </script>
        <script type="text/javascript">
            $(function(){
                $("#wizard").scrollable({
                    onSeek: function(event,i){ //切换tab样式
                        $("#status li").removeClass("active").eq(i).addClass("active");
                    },
                    onBeforeSeek:function(event,i){ //验证表单
                        if(i==1){
                            var user = $("#user").val();
                            if(user==""){
                                alert("请输入用户名！");
                                return false;
                            }
                            var pass = $("#pass").val();
                            var pass1 = $("#pass1").val();
                            if(pass==""){
                                alert("请输入密码！");
                                return false;
                            }
                            if(pass1 != pass){
                                alert("两次密码不一致！");
                                return false;
                            }
                        }
                    }
                });
            });
            function submitForm() {
            	var pass = $("#pass").val();
                var pass1 = $("#pass1").val();
            
                if(pass1 != pass){          
                    return false;
                }
                return true;
			}
            function findPassword() {
				if(submitForm()){
					document.form.submit();
				}
			}
        </script>

    </body>

</html>